<template>
  <scroll-view scroll-y class="layout" :lower-threshold="100" @scrolltolower="onLoadMore">
    <view class="table">
      <view class="tr">
        <view class="th">开奖期号</view>
        <view class="th">英雄</view>
        <view class="th">性别</view>
        <view class="th">单双</view>
        <view class="th">攻击</view>
        <view class="th">魔法</view>
      </view>
      <view class="tr bg-gray" v-for="(item, index) in historyAward" :key="index">
        <view class="td" v-text="item.time"></view>
        <view class="td">
          <view class="image">
            <image :src="item.icon" mode="widthFix"></image>
            <view class="no" v-text="item.no"></view>
          </view>
        </view>
        <view class="td" v-text="item.sex === 1 ? '男' : '女'"></view>
        <view class="td" v-text="item.num === 1 ? '单' : '双'"></view>
        <view class="td" v-text="item.remote === 2 ? '近战' : '远程'"></view>
        <view class="td" v-text="item.magic === 1 ? '有' : '无'"></view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
let game = null,
  page = 1,
  size = 15;
export default {
  data() {
    return {
      historyAward: [],
      total: 0
    };
  },
  onLoad(options) {
    page = 1;
    game = options.game;
    this.init();
  },
  methods: {
    init() {
      return this.$api.guessHero.getHistoryAward(game, page, size).then(response => {
        this.historyAward = [...this.historyAward, ...response.data.data.list];
        this.total = response.data.data.total;
        return response;
      });
    },
    onLoadMore() {
      if (this.total <= this.historyAward.length) {
        return false;
      }
      uni.showLoading({
        title: "正在加载中..."
      });
      page++;
      uni.showNavigationBarLoading();
      this.init().then(_ => {
        uni.hideLoading();
        uni.hideNavigationBarLoading();
      });
    }
  },
  onPullDownRefresh() {
    page = 1;
    this.historyAward = [];
    this.init().then(() => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
.table {
  .tr {
    margin-bottom: 10upx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10upx;
    view {
      text-align: center;
      &:nth-child(1) {
        width: 290upx;
      }
      &:nth-child(2) {
        width: 120upx;
      }
      &:nth-child(3) {
        width: 80upx;
      }
      &:nth-child(4) {
        width: 80upx;
      }
      &:nth-child(5) {
        width: 100upx;
      }
      &:nth-child(6) {
        width: 80upx;
      }
    }

    .td {
      .image {
        position: relative;
        margin: 0 auto;
        width: 100upx;
        height: 100upx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
        .no {
          position: absolute;
          right: 0;
          bottom: 0;
          color: #ffffff;
          background-color: rgba($color: #000000, $alpha: 0.7);
          font-size: 24upx;
          width: 60upx;
          text-align: center;
          padding: 2upx 0;
        }
      }
    }
  }
}
</style>
